Improve font stack #3771
Open
Improve font stack #3771
+48
−33
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…or improved localization consistency and reduced redundancy.
… rules for improved maintainability and reduced duplication.
…ng` attributes in pages with CJK languages.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This pull request refines how CJK (Chinese, Japanese, Korean) font stacks are applied throughout the site, improving language-specific font rendering and preventing CJK font styles from being incorrectly applied to non-CJK content. It introduces a new CSS variable for the CJK font stack and restructures selectors to ensure fonts are only applied where appropriate.
Font Stack Improvements
--font-sans-cjkfor the CJK font stack invariables.css, centralizing the font definition for easier maintenance. [1]Selector and Specificity Fixes (Improvement of #3744)
Updated selectors to ensure CJK fonts are only applied to elements and languages that require them, preventing CJK font styles from leaking into non-CJK content. The following elements and classes are now explicitly excluded from CJK font application:
code,pre,kbd,samp.font-default,.font-sans(when used without CJK language attributes)This ensures that code blocks and explicitly styled elements maintain their intended fonts even when the page language is set to CJK. [1]
Moved the CJK font application rules for
.font-defaultand.font-sansclasses to a new utility layer intailwind.cssto ensure proper specificity. These rules now apply the CJK font stack specifically when used with CJK language attributes (lang="ja",lang="ko",lang="zh-CN",lang="zh-TW"), providing proper font rendering for elements that explicitly declare CJK languages. [1]Summary
These changes collectively ensure that CJK font stacks are applied accurately and only where intended, improving typographic consistency for multilingual content. The improved selector specificity resolves issues where CJK fonts would override non-CJK content, while the new utility layer ensures proper font rendering for elements with explicit CJK language declarations.